<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Zhejiang Map</title>
    <script src="https://d3js.org/d3.v4.js"></script>
</head>

<body>

<script type="text/javascript">

    //svg的长度宽度
    var width = 1000;
    var height = 1000;

    //
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(0,0)");

    //定义地图投影
    var projection = d3.geo.mercator()
        .center([120, 29])　　　//设置地图中心位置，前经度后纬度
        .scale(4200)             //设置缩放量
        .translate([width / 2, height / 2]);　　　　//设置平移量


    //定义地理路径生成器
    var path = d3.geo.path()　　　　　　//应用上面生成的投影，每一个坐标都会先调用此投影函数，然后才产生路径值
        .projection(projection);

    //颜色比例尺
    var color = d3.scale.category20();


    d3.json("../geojson/zhe_jiang_geo.json", function (error, root) {

        if (error)
            console.error(error);
        console.log(root.features);

        svg.selectAll("path")
            .data(root.features)
            .enter()
            .append("path")
            .attr("stroke", "#000")   //svg边线属性定义，这里是颜色
            .attr("fill", "#ccc")   //每一块的颜色填充
            .attr("d", path);

    });
</script>

</body>
</html>
